<template>
    <div class="moments-page">
        <div class="main">
            <!-- 复用浮动元素 -->
            <div class="floating-elements">
                <div class="floating-square"></div>
                <div class="floating-square"></div>
                <div class="floating-square"></div>
                <div class="floating-circle"></div>
                <div class="floating-circle"></div>
                <div class="floating-circle"></div>
                <div class="floating-triangle"></div>
                <div class="floating-triangle"></div>
                <div class="floating-triangle"></div>
                <div class="floating-cross"></div>
                <div class="floating-cross"></div>
                <div class="floating-cross"></div>
            </div>

            <div class="container">
                <!-- 顶部背景和个人信息 -->
                <div class="moments-header cards">
                    <div class="header-bg">
                        <img src="./img/1.jpg" alt="背景图">
                    </div>
                    <div class="user-info">
                        <img src="./img/logo.png" alt="头像" class="user-avatar">
                        <span class="user-name">什么时候当老板</span>
                    </div>
                    <router-link to="/" class="back-link">
                        <svg class="back-icon" viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                        </svg>
                    </router-link>
                </div>

                <!-- 说说列表 -->
                <div class="moments-list">
                    <div v-for="post in posts" :key="post.id" class="moment-item cards">
                        <div class="moment-header">
                            <img src="./img/logo.png" alt="avatar" class="avatar">
                            <div class="post-info">
                                <span class="username">{{ post.username }}</span>
                                <div class="post-meta">
                                    <span class="time">{{ formatTime(post.createTime) }}</span>
                                    <span v-if="post.location" class="location">
                                        <svg class="location-icon" viewBox="0 0 24 24" width="16" height="16">
                                            <path fill="currentColor" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                                        </svg>
                                        {{ post.location }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="content" v-html="post.content.replace(/</g, '&lt;').replace(/>/g, '&gt;')"></div>
                        <div v-if="post.images?.length" class="images-grid" 
                            :class="{'single-image': post.images.length === 1}">
                            <img 
                                v-for="(img, index) in post.images" 
                                :key="index" 
                                :src="img" 
                                @click="previewImage(post.images, index)"
                            >
                        </div>
                        <div class="actions">
                            <button @click="toggleLike(post)" class="action-btn">
                                <span class="action-icon">{{ post.isLiked ? '❤️' : '🤍' }}</span>
                                <span class="action-count">{{ post.likes }}</span>
                            </button>
                            <button @click="focusComment(post)" class="action-btn">
                                <span class="action-icon">💬</span>
                                <span class="action-count">{{ post.comments.length }}</span>
                            </button>
                        </div>
                        <div class="comments-section">
                            <!-- 评论列表 -->
                            <div class="comments-list" v-if="post.comments.length > 0">
                                <div v-for="comment in post.comments" :key="comment.id" class="comment-item">
                                    <div class="comment-meta">
                                        <span class="comment-device" :class="comment.device">
                                            {{ comment.deviceName }}
                                        </span>
                                        <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
                                    </div>
                                    <div class="comment-content">{{ comment.content }}</div>
                                    <!-- Add replies section -->
                                    <div v-if="comment.replies && comment.replies.length > 0" class="replies-section gly">
                                        <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                                            <div class="comment-meta">
                                                <div class="flex items-center">
                                                    <img 
                                                    src="./img/logo.png"
                                                    class="reply-avatar mr-0"
                                                    alt="avatar"
                                                >
                                                <span class="comment-device" :class="reply.device">
                                                    {{ reply.deviceName === 'admin' ? '什么时候当老板' : reply.deviceName }}
                                                </span>
                                                </div>
                
                                                <span class="comment-time">{{ formatTime(reply.createTime) }}</span>
                                            </div>
                                            <div class="comment-content">
                                                <span class="reply-to">回复 @{{ 
                                                    reply.replyTo === 'admin' ? '什么时候当老板' : reply.replyTo 
                                                }}:</span>
                                                {{ reply.content }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 评论输入框 -->
                            <div v-if="showCommentInput[post.id]" class="comment-form">
                                <div class="reply-info" v-if="currentReplyTo[post.id]">
                                    回复给：{{ currentReplyTo[post.id].deviceName }}
                                    <button class="cancel-reply" @click="cancelReply(post.id)">取消回复</button>
                                </div>
                                <div class="user-info-bar">
                                    <div class="device-info" :class="userInfo?.device">
                                        <input
                                            type="text"
                                            :value="userInfo?.deviceName"
                                            class="device-name-input"
                                            @blur="updateUserName(($event.target as HTMLInputElement).value)"
                                            :placeholder="userInfo?.deviceInfo"
                                        >
                                        <span class="device-full-info" :title="userInfo?.deviceInfo">
                                            {{ userInfo?.deviceInfo }}
                                        </span>
                                    </div>
                                </div>
                                <div class="comment-input-wrapper">
                                    <textarea
                                        v-model="commentContent[post.id]"
                                        placeholder="说点什么..."
                                        class="comment-input"
                                        :disabled="commentLoading[post.id]"
                                        @keyup.enter.ctrl="async () => await submitComment(post)"
                                    ></textarea>
                                </div>
                                <div class="form-footer">
                                    <span class="tip">Ctrl + Enter 快捷发送</span>
                                    <button 
                                        class="submit-btn" 
                                        @click="submitComment(post)"
                                        :disabled="!commentContent[post.id]?.trim() || commentLoading[post.id]"
                                    >
                                        {{ commentLoading[post.id] ? '发送中...' : '发送' }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="previewVisible" class="image-preview-overlay" @click="previewVisible = false">
            <div class="image-preview-container" @click.stop>
                <img :src="previewImages[currentPreviewIndex]" alt="preview" class="preview-image">
                <button v-if="previewImages.length > 1" class="nav-btn prev" @click="prevImage">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                    </svg>
                </button>
                <button v-if="previewImages.length > 1" class="nav-btn next" @click="nextImage">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
                    </svg>
                </button>
                <div class="preview-counter" v-if="previewImages.length > 1">
                    {{ currentPreviewIndex + 1 }}/{{ previewImages.length }}
                </div>
                <button class="close-preview" @click="previewVisible = false">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import momentsApi from '@/http/apis/moments'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

interface Comment {
    id: number | string
    content: string
    device: string        // mobile/desktop
    deviceType?: string   // Add deviceType field
    deviceName: string    // 用户显示名称
    deviceInfo: string    // 完整设备信息
    createTime: string
    replyTo?: string     // 回复目标的用户名
    parentId?: number | string  // 父评论ID
    replies?: Comment[]   // Add replies field
}

interface Post {
    id: number | string
    content: string
    images?: string[]
    username: string
    avatar: string
    createTime: string
    likes: number
    isLiked: boolean
    comments: Comment[]
    location?: string
}

interface UserInfo {
    device: string        // mobile/desktop
    deviceName: string    // 用户自定义名称
    deviceInfo: string    // 完整设备信息
}

interface MomentQuery {
    page: number
    pageSize: number
}

const isLoggedIn = ref(false)
const showPostForm = ref(false)
const posts = ref<Post[]>([])
const loading = ref(false)

// 获取说说列表
const getMomentsList = async () => {
    try {
        loading.value = true
        const data = await momentsApi.getAllMoments()
        // 处理返回的数据，修改头像和用户名
        const processedList = (data || []).map((post: Post) => ({
            ...post,
            avatar: './img/logo.png', // 使用 logo.png 作为头像
            username: post.username === 'admin' ? '什么时候当老板' : post.username
        }))
        posts.value = processedList
    } catch (error) {
        console.error('获取说说列表失败:', error)
    } finally {
        loading.value = false
    }
}

const newPost = ref({
    content: '',
    images: [] as File[],
    location: ''
})

const checkLoginStatus = () => {
    const token = localStorage.getItem('token')
    isLoggedIn.value = !!token
}

const formatTime = (time: string) => {
    const now = dayjs()
    const postTime = dayjs(time)
    const diffMinutes = now.diff(postTime, 'minute')
    const diffHours = now.diff(postTime, 'hour')
    const diffDays = now.diff(postTime, 'day')
    const diffMonths = now.diff(postTime, 'month')
    const diffYears = now.diff(postTime, 'year')

    if (diffMinutes < 1) {
        return '刚刚'
    } else if (diffMinutes < 60) {
        return `${diffMinutes}分钟前`
    } else if (diffHours < 24) {
        return `${diffHours}小时前`
    } else if (diffDays < 30) {
        return `${diffDays}天前`
    } else if (diffMonths < 12) {
        return `${diffMonths}个月前`
    } else {
        return `${diffYears}年前`
    }
}

const handleImageUpload = (event: Event) => {
    const files = (event.target as HTMLInputElement).files
    if (files) {
        const newFiles = Array.from(files)
        newPost.value.images = [...newPost.value.images, ...newFiles]
        newFiles.forEach(file => {
            const reader = new FileReader()
            reader.onload = (e) => {
                previewImages.value.push(e.target?.result as string)
            }
            reader.readAsDataURL(file)
        })
    }
}

const submitPost = async () => {
    // 模拟发布说说
    const newId = posts.value.length + 1
    posts.value.push({
        id: newId,
        content: newPost.value.content,
        images: newPost.value.images.map(file => URL.createObjectURL(file)),
        username: '什么时候当老板', // 假设当前用户是 admin
        avatar: './img/logo.png', // 使用 logo.png 作为头像
        createTime: new Date().toISOString(),
        likes: 0,
        isLiked: false,
        comments: [],
        location: newPost.value.location
    })
    showPostForm.value = false
    newPost.value = {
        content: '',
        images: [],
        location: ''
    }
}

const toggleLike = async (post: Post) => {
    try {
        await momentsApi.toggleLike(post.id)
        post.isLiked = !post.isLiked
        post.likes += post.isLiked ? 1 : -1
    } catch (error) {
        ElMessage.error('操作失败，请稍后重试')
    }
}

const currentPost = ref<Post | null>(null)
const commentContent = ref<{ [key: string]: string }>({})
const commentLoading = ref<{ [key: string]: boolean }>({})

const showCommentInput = ref<{ [key: string]: boolean }>({})
const userInfo = ref<UserInfo | null>(null)

const focusComment = async (post: Post) => {
    // 如果已经显示了评论框，就隐藏它
    if (showCommentInput.value[post.id]) {
        showCommentInput.value[post.id] = false
        return
    }

    try {
        const response = await momentsApi.getUserInfo()
        console.log('用户信息响应:', response)
        
        const deviceInfo = response.deviceInfo
        const isMobile = deviceInfo.isMobile
        const deviceType = isMobile ? 'mobile' : 'desktop'
        const fullDeviceInfo = `${deviceInfo.browser} ${deviceInfo.version} on ${deviceInfo.os}`
        
        // 从本地存储获取用户自定义名称，如果没有则使用默认值
        const savedName = localStorage.getItem('commentUserName') || (isMobile ? 'Mobile' : 'PC')
        
        userInfo.value = {
            device: deviceType,
            deviceName: savedName,
            deviceInfo: fullDeviceInfo
        }
        
        // 初始化评论内容
        if (!commentContent.value[post.id]) {
            commentContent.value[post.id] = ''
        }
        
        // 显示评论框
        showCommentInput.value[post.id] = true
        
    } catch (error) {
        console.error('获取用户信息错误:', error)
        ElMessage.error('获取用户信息失败')
    }
}

const currentReplyTo = ref<{ [key: string]: Comment | null }>({})

const showReplyInput = (postId: string | number, comment: Comment) => {
    currentReplyTo.value[postId] = comment
    showCommentInput.value[postId] = true
}

const cancelReply = (postId: string | number) => {
    currentReplyTo.value[postId] = null
}

const submitComment = async (post: Post) => {
    const content = commentContent.value[post.id]
    if (!content?.trim() || !userInfo.value) return
    
    try {
        commentLoading.value[post.id] = true
        
        const ipResponse = await momentsApi.getUserInfo()
        const customName = userInfo.value.deviceName
        
        // 添加回复相关信息
        const replyTo = currentReplyTo.value[post.id]
        const commentData = {
            momentId: post.id,
            content: content.trim(),
            deviceName: customName,
            deviceInfo: userInfo.value.deviceInfo,
            ipAddress: ipResponse.ipAddress,
            // 如果存在回复目标，添加相关信息
            ...(replyTo && {
                replyTo: replyTo.deviceName,
                parentId: replyTo.id
            })
        }
        
        const response = await momentsApi.addComment(commentData)

        if (response) {
            // 添加新评论到列表开头
            post.comments.unshift({
                id: response.id,
                content: content.trim(),
                device: userInfo.value.device,
                deviceName: response.deviceName || customName,
                deviceInfo: userInfo.value.deviceInfo,
                createTime: new Date().toISOString(),
                // 添加回复相关信息
                ...(replyTo && {
                    replyTo: replyTo.deviceName,
                    parentId: replyTo.id
                })
            })
            
            // 清空评论框和回复信息
            commentContent.value[post.id] = ''
            currentReplyTo.value[post.id] = null
            showCommentInput.value[post.id] = false
            ElMessage.success('评论成功')
        }
    } catch (error) {
        console.error('评论失败:', error)
        ElMessage.error('评论失败，请稍后重试')
    } finally {
        commentLoading.value[post.id] = false
    }
}

const previewImage = (images: string[], index: number) => {
    previewImages.value = images
    currentPreviewIndex.value = index
    previewVisible.value = true
}

const triggerFileInput = () => {
    const fileInput = document.querySelector('.file-input') as HTMLInputElement
    fileInput?.click()
}

const previewImages = ref<string[]>([])
const previewVisible = ref(false)
const currentPreviewIndex = ref(0)

const removeImage = (index: number) => {
    newPost.value.images = newPost.value.images.filter((_, i) => i !== index)
    previewImages.value = previewImages.value.filter((_, i) => i !== index)
}

const prevImage = () => {
    if (currentPreviewIndex.value > 0) {
        currentPreviewIndex.value--
    }
}

const nextImage = () => {
    if (currentPreviewIndex.value < previewImages.value.length - 1) {
        currentPreviewIndex.value++
    }
}

// 修改更新用户名的方法
const updateUserName = (newName: string) => {
    if (!userInfo.value || !newName.trim()) return
    
    // 如果新名字和当前名字相同，不做任何操作
    if (newName.trim() === userInfo.value.deviceName) return
    
    try {
        userInfo.value.deviceName = newName.trim()
        localStorage.setItem('commentUserName', newName.trim())
        ElMessage.success('昵称已更新')
    } catch (error) {
        console.error('更新昵称失败:', error)
        ElMessage.error('更新昵称失败')
    }
}

// 添加一个新的方法来处理 Ctrl+Enter 事件
const handleCtrlEnter = async (post: Post) => {
    if (!commentContent.value[post.id]?.trim()) return
    await submitComment(post)
}

onMounted(async () => {
    checkLoginStatus()
    getMomentsList() // 在组件挂载时获取说说列表
})
</script>

<style scoped>
.moments-page {
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    overflow: auto;
}

.main {
    position: relative;
    color: #fff;
    min-height: 100vh;
    padding-bottom: 2rem;
    background:
        radial-gradient(circle at 10% 20%, rgba(91, 37, 195, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(41, 125, 182, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
}

.container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.moments-header {
    position: relative;
    height: 300px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.4));
}

.user-info {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2;
}

.user-avatar {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-name {
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.back-link {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    z-index: 2;
    transition: all 0.3s ease;
}

.back-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-5px);
}

.cards {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.cards:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px -2px rgba(0, 0, 0, 0.25);
}

.moments-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.moment-item {
    padding: 1.5rem;
    animation: fadeInUp 0.8s ease forwards;
}

.moment-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    margin-right: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.post-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.location {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.location-icon {
    opacity: 0.8;
}

.username {
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
}

.time {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.content {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.images-grid.single-image {
    display: block;
}

.images-grid.single-image img {
    max-width: 300px;
    max-height: 300px;
    width: auto;
}

.images-grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.images-grid img:hover {
    transform: scale(1.02);
}

.actions {
    display: flex;
    gap: 1.5rem;
    padding: 0.8rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    min-width: 80px;
    font-size: 1rem;
}

.action-icon {
    font-size: 1.2rem;
}

.action-count {
    font-size: 1rem;
    font-weight: 500;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* 发布按钮样式 */
.post-btn-wrapper {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 10;
}

.post-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.post-btn:hover {
    transform: rotate(90deg);
}

/* 发布表单样式 */
.post-form-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.post-form {
    width: 90%;
    max-width: 600px;
    padding: 2rem;
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    color: #fff;
}

.close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.post-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    color: #fff;
    font-size: 1.1rem;
    resize: vertical;
    min-height: 100px;
    margin-bottom: 1rem;
}

.post-form textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
}

.image-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.preview-item {
    position: relative;
}

.preview-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.remove-img {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.upload-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.submit-btn {
    background: linear-gradient(45deg, #5b25c3, #297db6);
    border: none;
    color: #fff;
    padding: 0.5rem 2rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91, 37, 195, 0.3);
}

.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .moments-header {
        height: 200px;
    }

    .user-avatar {
        width: 50px;
        height: 50px;
    }

    .user-name {
        font-size: 1.2rem;
    }

    .moment-item {
        padding: 1rem;
    }

    .images-grid.single-image img {
        max-width: 100%;
    }

    .post-form {
        padding: 1.5rem;
    }

    .form-footer {
        flex-direction: column;
        gap: 1rem;
    }

    .upload-btn, .submit-btn {
        width: 100%;
        text-align: center;
    }

    .actions {
        justify-content: space-around;
        padding: 1rem 0;
    }
    
    .action-btn {
        flex: 1;
        justify-content: center;
        font-size: 1.1rem;
        padding: 0.8rem;
    }
    
    .action-icon {
        font-size: 1.3rem;
    }
    
    .comment-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .comment-device {
        font-size: 1.1rem;
    }
    
    .comment-form {
        padding: 1rem;
    }
    
    .device-info {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .device-name-input {
        width: 100%;
        text-align: center;
    }
    
    .device-full-info {
        display: none;
    }
    
    .form-footer {
        flex-direction: column;
        gap: 1rem;
    }
    
    .submit-btn {
        width: 100%;
        padding: 0.8rem;
        font-size: 1.1rem;
    }
}

.location-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.location-input-field {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1rem;
    width: 100%;
}

.location-input-field:focus {
    outline: none;
}

.location-input-field::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.image-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.preview-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 1rem;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.nav-btn.prev {
    left: -60px;
}

.nav-btn.next {
    right: -60px;
}

.preview-counter {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.close-preview {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
}

.close-preview:hover {
    transform: scale(1.1);
}

.comments-section {
    margin-top: 1rem;
}

.comment-input-wrapper {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.comment-input {
    flex: 1;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 8px 16px;
    color: #fff;
    font-size: 0.9rem;
    resize: none;
    transition: all 0.3s ease;
}

.comment-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
    height: 60px;
}

.submit-btn {
    align-self: flex-start;
    background: linear-gradient(45deg, #5b25c3, #297db6);
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91, 37, 195, 0.3);
}

.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.user-info-bar {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.device-info, .ip-info {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.device-info::before {
    content: '📱';
}

.ip-info::before {
    content: '🌐';
}

.comment-form {
    margin-top: 1rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.comment-form:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px -2px rgba(0, 0, 0, 0.15);
}

.user-info-bar {
    margin-bottom: 1rem;
}

.device-info {
    padding: 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.device-name-input {
    font-size: 1rem;
    padding: 0.4rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    transition: all 0.3s ease;
}

.device-name-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.2);
}

.comment-input {
    min-height: 100px;
    font-size: 1rem;
    padding: 1rem;
}

.comment-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.07);
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tip {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.submit-btn {
    background: linear-gradient(45deg, #5b25c3, #297db6);
    border: none;
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-weight: 500;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91, 37, 195, 0.3);
}

/* 评论列表样式优化 */
.comment-item {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.comment-device {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.comment-device.mobile::before {
    content: '📱';
    margin-right: 0.3rem;
}

.comment-device.desktop::before {
    content: '💻';
    margin-right: 0.3rem;
}

.gly .comment-device.desktop::before {
    content: '';
}

.comment-time {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
}

.comment-content {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-size: 1rem;
    word-break: break-word;
}

.reply-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.2rem 0.5rem;
    transition: all 0.3s ease;
}

.reply-btn:hover {
    color: rgba(255, 255, 255, 0.9);
}

.reply-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.cancel-reply {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.2rem 0.5rem;
    transition: all 0.3s ease;
}

.cancel-reply:hover {
    color: rgba(255, 255, 255, 0.9);
}

.reply-to {
    color: rgba(255, 255, 255, 0.6);
    margin-right: 0.5rem;
}

/* Add styles for replies */
.replies-section {
    margin-left: 1.5rem;
    margin-top: 0.8rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.reply-item {
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 8px;
    margin-bottom: 0.6rem;
}

.reply-to {
    color: rgba(255, 255, 255, 0.6);
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.reply-avatar {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-right: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gly img {
    margin-right: 0;
}
</style> 